import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Platform,
  StyleSheet,
  TextInput,
  DeviceEventEmitter,
  Image,
} from 'react-native';

import PxToDp from '../../utils/PxToDp';
import FontFamilys from '../../utils/FontFamilys';
import Request from '../../utils/request';

export default class Feedback extends Component {
  constructor(props) {
    super(props);

    this.state = {
      feedback: '',
      toastMsg: '',
    };
  }
  back() {
    this.props.navigator.pop();
  }
  commit(feedback) {
    if (feedback === '') {
      return;
    }
    Request.post({
      url: '/dealer/feedback',
      data: {
        feedback,
      },
      success: () => {
        DeviceEventEmitter.emit('showToast', '反馈提交成功!', 700);
        setTimeout(() => {
          this.props.navigator.pop();
        }, 1200);
      },
      fail: () => {
        DeviceEventEmitter.emit('showToast', '反馈提交失败!');
      },
      error: () => {
        DeviceEventEmitter.emit('showToast', '服务器开小差了，请稍后再试!');
      },
    });
  }
  render() {
    return (
      <View style={[style.flex, style.bg]}>
        <View style={[style.header, style.row]}>
          <TouchableOpacity
            style={[style.flex, style.titleStart]}
            onPress={() => this.back()}
          >
            <Image style={style.backIcon} source={require('../../img/go_back.png')} />
          </TouchableOpacity>
          <View style={[style.flex, style.center]}>
            <Text style={style.nameTitle}>意见反馈</Text>
          </View>
          <TouchableOpacity
            style={[style.flex, style.titleEnd]}
            onPress={() => this.commit(this.state.feedback)}
          >
            <Text style={style.commit}>完成</Text>
          </TouchableOpacity>
        </View>
        <View style={style.container}>
          <TextInput
            style={[style.flex, style.textinput]}
            placeholder="感谢您的反馈"
            multiline
            onChangeText={text => this.setState({ feedback: text })}
            underlineColorAndroid="transparent"
          />
        </View>
      </View>
    );
  }
}

const style = StyleSheet.create({
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  bg: {
    backgroundColor: '#F5F5F5',
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
  header: {
    height: PxToDp(46),
    backgroundColor: '#fff',
  },
  center: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  titleStart: {
    alignItems: 'flex-start',
    justifyContent: 'center',
    paddingLeft: PxToDp(10),
  },
  titleEnd: {
    alignItems: 'flex-end',
    justifyContent: 'center',
    paddingRight: PxToDp(10),
  },
  backIcon: {
    width: PxToDp(20),
    height: PxToDp(24),
  },
  nameTitle: {
    fontFamily: FontFamilys(),
    fontSize: PxToDp(18),
    color: '#333333',
  },
  commit: {
    fontFamily: FontFamilys(),
    fontSize: PxToDp(18),
    color: '#458fff',
  },
  container: {
    height: PxToDp(136),
    backgroundColor: '#fff',
    marginTop: PxToDp(24),
  },
  textinput: {
    borderWidth: 1,
    borderColor: '#F3F4F6',
    borderStyle: 'solid',
    width: '100%',
    textAlignVertical: 'top',
  },
});
